<template>
  <div class="contractAward_info">
    <el-scrollbar height="760px">
      <div style="padding: 10px 0 20px">
        <el-form
          ref="contractAwardRef"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <el-card class="box-card" shadow="always" style="background: #fafafa">
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>基本信息</span>
              </div>
            </template>
            <el-row style="padding: 10px 40px">
              <el-col :span="8">
                <el-form-item label="老人姓名:" style="font-weight: 700">
                  <span style="margin-left: 10px; font-weight: 400">{{
                    form.applyName
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8" style="font-weight: 700">
                <el-form-item label="性别:" style="font-weight: 700">
                  <span style="margin-left: 10px; font-weight: 400">
                    {{
                      sys_user_sex.find((item) => item.value == form.sex)
                        ? sys_user_sex.find((item) => item.value == form.sex)
                            .label
                        : ""
                    }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="font-weight: 700">
                <el-form-item label="年龄:" style="font-weight: 700">
                  <span style="margin-left: 10px; font-weight: 400">{{
                    form.age
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="合同模板:" prop="contractTemplateId">
                  <el-select
                    v-model="form.contractTemplateId"
                    clearable
                    @change="changeVal"
                    placeholder="请选择合同模版"
                    :disabled="form.signStatus != '0'"
                  >
                    <el-option
                      v-for="dict in contractAwardList"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 20px"
          >
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>合同内容</span>
              </div>
            </template>
            <el-row style="padding: 10px 40px">
              <el-col :span="12">
                <el-form-item label="合同编号:" prop="contractCode">
                  <el-input
                    v-model="form.contractCode"
                    placeholder="请输入合同编号"
                    :disabled="true"
                    style="width: 70%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="签订时间:" prop="signTime">
                  <el-date-picker
                    :disabled="form.signStatus != '0'"
                    v-model="form.signTime"
                    style="width: 70%"
                    type="date"
                    placeholder="选择签订时间"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同开始时间:" prop="beginTime">
                  <el-date-picker
                    :disabled="form.signStatus != '0'"
                    v-model="form.beginTime"
                    style="width: 70%"
                    type="date"
                    placeholder="选择合同开始时间"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同结束时间:" prop="endTime">
                  <el-date-picker
                    :disabled="form.signStatus != '0'"
                    v-model="form.endTime"
                    style="width: 70%"
                    type="date"
                    placeholder="选择合同结束时间"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="甲方:" prop="partyA">
                  <el-input
                    v-model="form.partyA"
                    placeholder="请输入甲方"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方:" prop="partyB">
                  <el-input
                    v-model="form.partyB"
                    placeholder="请输入乙方"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="甲方联系电话:" prop="partyATelephone">
                  <el-input
                    v-model="form.partyATelephone"
                    placeholder="请输入甲方联系电话"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方联系电话:" prop="partyBTelephone">
                  <el-input
                    v-model="form.partyBTelephone"
                    placeholder="请输入乙方联系电话"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="甲方联系地址:" prop="partyAAddress">
                  <el-input
                    v-model="form.partyAAddress"
                    placeholder="请输入甲方联系地址"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方联系地址:" prop="partyBAddress">
                  <el-input
                    v-model="form.partyBAddress"
                    placeholder="请输入乙方联系地址"
                    style="width: 70%"
                    :disabled="form.signStatus != '0'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 20px"
          >
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>服务计划</span>
              </div>
            </template>
            <div>
              <el-table
                v-loading="loading"
                :data="form.servicePlanList"
                stripe
                border
                max-height="250"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="80"
                  align="center"
                />
                <el-table-column
                  label="服务项目"
                  align="center"
                  prop="serviceItemName"
                />
                <el-table-column
                  label="单价（元）"
                  align="center"
                  prop="unitPrice"
                />
                <el-table-column label="单位" align="center">
                  <template #default="scope">
                    <span>
                      {{
                        bed_uint.find((item) => item.value == scope.row.unit)
                          ? bed_uint.find(
                              (item) => item.value == scope.row.unit,
                            ).label
                          : ""
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="社区站点佣金（元）"
                  align="center"
                  prop="commission"
                />
                <el-table-column label="服务频率" align="center">
                  <template #default="scope">
                    <span>
                      {{
                        service_frequency.find(
                          (item) => item.value == scope.row.serviceFrequency,
                        )
                          ? service_frequency.find(
                              (item) =>
                                item.value == scope.row.serviceFrequency,
                            ).label
                          : ""
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="服务次数"
                  align="center"
                  prop="serviceTimes"
                />
                <el-table-column label="备注" align="center" prop="notes" />
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template #default="scope">
                    <el-button link type="primary" @click="edit(scope.row)"
                      >查看服务时间</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 20px"
          >
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>合同详情</span>
              </div>
            </template>
            <div class="editor-box">
              <QuillEditor
                content-type="html"
                ref="myQuillEditor"
                theme="snow"
                v-model:content="form.content"
                :options="editorOption"
              >
              </QuillEditor>
            </div>
          </el-card>
          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 20px"
          >
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>其他附件</span>
              </div>
            </template>
            <div>
              <el-upload
                style="width: 100%"
                v-model:file-list="fileList"
                class="upload-demo"
                :action="url"
                :headers="upload.headers"
                multiple
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :limit="10"
                :on-exceed="handleExceed"
              >
                <el-button
                  type="primary"
                  link
                  :disabled="form.signStatus != '0'"
                  >添加附件</el-button
                >
              </el-upload>
            </div>
          </el-card>

          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 20px"
            v-if="form.signStatus != '0'"
          >
            <template #header>
              <div class="card-header" style="padding-bottom: 4px">
                <span>确认签字</span>
              </div>
            </template>
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; margin-left: 30px">
                <span
                  style="color: red; display: inline-block; margin-top: 10px"
                  >*</span
                ><span
                  style="
                    margin-left: 5px;
                    display: inline-block;
                    margin-top: 10px;
                  "
                  >甲方:</span
                >
                <div
                  style="
                    margin-left: 20px;
                    background: #ffffff;
                    border-radius: 10px;
                  "
                >
                  <el-image
                    style="width: 250px; height: 120px"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[form.partyASignatureUrl]"
                    :src="form.partyASignatureUrl"
                  />
                </div>
              </div>
              <div style="display: flex; margin-right: 300px">
                <span
                  style="color: red; display: inline-block; margin-top: 10px"
                  >*</span
                ><span
                  style="
                    margin-left: 5px;
                    display: inline-block;
                    margin-top: 10px;
                  "
                  >乙方:</span
                >
                <div
                  style="
                    margin-left: 20px;
                    background: #ffffff;
                    border-radius: 10px;
                  "
                >
                  <el-image
                    style="width: 250px; height: 120px"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[form.partyBSignatureUrl]"
                    :src="form.partyBSignatureUrl"
                  />
                </div>
              </div>
            </div>
          </el-card>
          <el-card
            class="box-card"
            shadow="always"
            style="background: #fafafa; margin-top: 15px"
          >
            <div style="text-align: right; padding-right: 50px">
              <el-button
                type="primary"
                style="margin-left: 20px"
                v-if="form.signStatus == '0'"
                @click="submitFormDebounceHandler"
                >确 定</el-button
              >
              <el-button @click="goCancel">取 消</el-button>
            </div>
          </el-card>
        </el-form>
      </div>
    </el-scrollbar>
    <el-dialog
      v-model="open"
      title="设置服务时间"
      append-to-body
      width="600px"
      v-if="open"
      @close="cancel"
      :close-on-click-modal="false"
    >
      <div>
        <el-table v-loading="loading" :data="postList" stripe border>
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column label="日期" align="center">
            <template #default="scope">
              <span v-if="serviceFrequency == '1'">
                {{
                  plan_week.find((item) => item.value == scope.row.date)
                    ? plan_week.find((item) => item.value == scope.row.date)
                        .label
                    : ""
                }}
              </span>
              <span v-else-if="serviceFrequency == '2'">
                {{
                  plan_day.find((item) => item.value == scope.row.date)
                    ? plan_day.find((item) => item.value == scope.row.date)
                        .label
                    : ""
                }}
              </span>
              <span v-else>
                {{ scope.row.date }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="服务开始时间"
            align="center"
            prop="beginTime"
          />
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.contractAward_info {
  padding: 20px;
}
</style>
<script setup name="contractAward_info">
  import { onMounted, ref } from "vue";
  import { Base64 } from "js-base64";

  const { proxy } = getCurrentInstance();
  const { sys_user_sex, bed_uint, service_frequency, plan_week, plan_day } =
    proxy.useDict(
      "sys_user_sex",
      "bed_uint",
      "service_frequency",
      "plan_week",
      "plan_day",
    );
  import { useRouter, useRoute } from "vue-router";
  import { QuillEditor, Quill } from "@vueup/vue-quill";
  import QuillBetterTable from "quill-better-table";

  import "@vueup/vue-quill/dist/vue-quill.snow.css";
  import {
    contractSignInfo,
    contractSignUpdate,
    genContractCode,
    getContractTemplateSelectOptions,
  } from "@/api/homebedsign";
  import { getToken } from "@/utils/auth";
  import { debounce } from "@/utils/debounce.js";
  const router = useRouter();
  const route = useRoute();
  const loading = ref(false);
  const open = ref(false);
  const postList = ref(false);
  const serviceFrequency = ref("");
  const contractAwardList = ref([]);
  const title = ref("新增/编辑适老化改造产品");
  const fileList = ref([]);

  const url = ref(process.env.VUE_APP_BASE_API + "/file/upload/pk-contract-sign");
  const upload = reactive({
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
  });

  const fontSize = Quill.import("attributors/style/size"); // 引入这个后样式写在style上
  fontSize.whitelist = [
    false,
    "12px",
    "14px",
    "16px",
    "18px",
    "20px",
    "24px",
    "28px",
    "32px",
  ];
  Quill.register(fontSize, true);

  // 自定义字体类型
  const fonts = [
    false,
    "SimSun",
    "SimHei",
    "Microsoft-YaHei",
    "KaiTi",
    "FangSong",
    "Arial",
    "Times-New-Roman",
    "sans-serif",
    "宋体",
    "黑体",
  ];

  const Font = Quill.import("attributors/style/font");
  Font.whitelist = fonts;
  Quill.register(Font, true);

  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    // [{ align: [] }], // 对齐方式----- 手动展开[{ align: [] }]
    [{ align: "" }, { align: "center" }, { align: "right" }], // 对齐方式----- 默认展开
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ size: fontSize.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    //fontSizeStyle.whitelist  ['small', false, 'large', 'huge']
    [{ font: Font.whitelist }], // 字体种类-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ direction: "ltl" }, { direction: "rtl" }], // 文本方向-----[{'direction': 'ltl'}]  [{'direction': 'rtl'}]
    [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ color: [] }, { background: [] }, "blockquote", "code-block", "clean"], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    // ['blockquote'], //  引用  代码块-----['blockquote', 'code-block']
    // ['clean'], // 清除文本格式-----['clean']
    ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
    // 插入表情

    // ['table']
  ];
  const myQuillEditor = ref("");
  const modules = ref({
    table: true, // disable table module
    "better-table": {
      operationMenu: {
        items: {
          unmergeCells: {
            text: "Another unmerge cells name",
          },
        },
        color: {
          colors: ["#fff", "red", "rgb(0, 0, 0)"], // colors in operationMenu
          text: "Background Colors", // subtitle
        },
      },
    },
    keyboard: {
      bindings: QuillBetterTable.keyboardBindings,
    },
  });

  const editorOption = ref({
    modules: {
      //   table: true,  // disable table module
      //   'better-table': {
      //   operationMenu: {
      //     items: {
      //       unmergeCells: {
      //         text: 'Another unmerge cells name'
      //       }
      //     },
      //     color: {
      //       colors: ['#fff', 'red', 'rgb(0, 0, 0)'],  // colors in operationMenu
      //       text: 'Background Colors'  // subtitle
      //     }
      //   }
      // },
      // keyboard: {
      //   bindings: QuillBetterTable.keyboardBindings
      // },

      toolbar: toolbarOptions,
    },
    placeholder: "请输入内容",
  });

  const data = reactive({
    form: {},
    rules: {
      contractCode: [
        { required: true, message: "请输入合同编号", trigger: "blur" },
      ],
      contractTemplateId: [
        { required: true, message: "请选择合同模版", trigger: "change" },
      ],
      signTime: [
        { required: true, message: "请选择签订时间", trigger: "change" },
      ],
      beginTime: [
        { required: true, message: "请选择合同开始时间", trigger: "change" },
      ],
      endTime: [
        { required: true, message: "请选择合合同结束时间", trigger: "change" },
      ],
      partyA: [
        { required: true, message: "请输入甲方", trigger: "blur" },
        {
          required: true,
          min: 1,
          max: 20,
          message: "甲方名称不超过20个字符",
          trigger: "blur",
        },
      ],
      partyB: [
        { required: true, message: "请输入乙方", trigger: "blur" },
        {
          required: true,
          min: 1,
          max: 20,
          message: "乙方名称不超过20个字符",
          trigger: "blur",
        },
      ],
      partyATelephone: [
        { required: true, message: "请输入甲方联系电话", trigger: "blur" },
        {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur",
        },
      ],
      partyBTelephone: [
        { required: true, message: "请输入乙方联系电话", trigger: "blur" },
        {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur",
        },
      ],
      partyAAddress: [
        { required: true, message: "请输入甲方联系地址", trigger: "blur" },
        {
          required: true,
          min: 1,
          max: 50,
          message: "甲方联系地址不超过50个字符",
          trigger: "blur",
        },
      ],
      partyBAddress: [
        { required: true, message: "请输入乙方联系地址", trigger: "blur" },
        {
          required: true,
          min: 1,
          max: 50,
          message: "乙方联系地址不超过50个字符",
          trigger: "blur",
        },
      ],
    },
    ageReformItem: {},
  });

  const { form, rules, ageReformItem } = toRefs(data);

  const getInfo = (id) => {
    contractSignInfo(id).then((res) => {
      form.value = res.contractSignDetail;
      form.value.homeBedApplyId = res.contractSignDetail.id;
      fileList.value = res.contractSignDetail.contractSignAttachmentList;
      if (form.value.signStatus == "0") {
        genContractCode().then((res) => {
          form.value.contractCode = res.contractCode;
        });
      }
      form.value.content = Base64.decode(form.value.content);
    });
  };

  /** 提交按钮 */
  const submitFormDebounceHandler = debounce(submitForm, 500);
  function submitForm() {
    proxy.$refs["contractAwardRef"].validate((valid) => {
      if (valid) {
        // 特殊字符转义
        form.value.content = Base64.encode(form.value.content);

        const start = new Date(form.value.beginTime);
        const end = new Date(form.value.endTime);
        const signTime = new Date(form.value.signTime);

        if (start > end) {
          proxy.$modal.msgError("开始时间不能大于结束时间");
          return false;
        }

        if (signTime > start) {
          proxy.$modal.msgError("签约时间不能大于合同开始时间时间");
          return false;
        }

        contractSignUpdate(form.value).then((res) => {
          proxy.$modal.msgSuccess("签约成功");
          router.push("/homebedsign/contractAward");
        });
      }
    });
  }

  function cancel() {
    open.value = false;
    postList.value = [];
  }

  function edit(data) {
    open.value = true;
    serviceFrequency.value = data.serviceFrequency;
    postList.value = data.serviceTimeList;
  }

  function changeVal(val) {
    const obj = contractAwardList.value.find((item) => item.id == val);
    form.value.content = Base64.decode(obj.content);
  }

  function goCancel() {
    router.go(-1);
  }

  function handleExceed(files, uploadFiles) {
    proxy.$modal.msgError("附件最多上传10个");
  }

  function handleRemove(files, fileList) {
    let arr = [];
    for (let i in fileList) {
      console.log(fileList[i]);
      if (fileList[i].response) {
        arr.push({
          name: fileList[i].response.data.name,
          attachmentUrl: fileList[i].response.data.url,
        });
      } else {
        arr.push({
          name: fileList[i].name,
          attachmentUrl: fileList[i].url,
        });
      }
    }
    form.value.contractSignAttachmentList = arr;
  }
  function handleUploadSuccess(res, file, fileList) {
    console.log("url", url.value);
    let arr = [];
    for (let i in fileList) {
      console.log(fileList[i]);
      if (fileList[i].response) {
        arr.push({
          name: fileList[i].response.data.name,
          attachmentUrl: fileList[i].response.data.url,
        });
      } else {
        arr.push({
          name: fileList[i].name,
          attachmentUrl: fileList[i].url,
        });
      }
    }
    form.value.contractSignAttachmentList = arr;
  }

  onMounted(() => {
    // const quill = toRaw(myQuillEditor.value).getQuill()
    // console.log(myQuillEditor.value, "quill");
  });

  /* function getInfo(id) {
      contractSignInfo(id).then((res) => {
        form.value = res.contractSignDetail;
        // form.value.content = Base64.decode(form.value.content)
        form.value.homeBedApplyId = res.contractSignDetail.id;
        fileList.value = res.contractSignDetail.contractSignAttachmentList;
        if (form.value.signStatus == "0") {
          genContractCode().then((res) => {
            form.value.contractCode = res.contractCode;
          });
        }
      });
    } */

  function ContractTemplateSelectOptions() {
    getContractTemplateSelectOptions().then((res) => {
      contractAwardList.value = res.contractTemplateSelectOptionsList.map(
        (item) => ({ ...item, id: item.id.toString() }),
      );
    });
  }

  const stopWatch = watch(
    () => route,
    (newVal, oldVal) => {
      if (newVal) {
        ContractTemplateSelectOptions();
        getInfo(newVal.params.id);
      }
    },
    { immediate: true },
  );

  onBeforeUnmount(() => {
    stopWatch();
  });
</script>

<style scoped lang="scss">
// 富文本的高度调整
.editor-box {
  // border: 1px solid red;
  height: 350px;
  width: 100%;
  :deep(.ql-editor) {
    border: 1px solid #d1d5db;
    height: 276px;
  }

  :deep(.ql-container.ql-snow) {
    border: 1px solid #fff;
  }
}
</style>
<style>
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "字号";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "正文" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "字体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "SimSun" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "SimHei" !important;
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "罗马" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
  content: "宋体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
  content: "黑体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋" !important;
}
</style>
